<template>
  <div class="container">
    <div class="container__header">
      <Header :currentId="2" />
    </div>
    <div class="container__content">
      <div class="container__content__opration">
        <div class="justify-start">
          <date-tab ref="reset" @selectDate="handleSelectDate"></date-tab>
          <div class="select-type">

            <span>预警类型</span>
            <el-select @change="selectChanged" v-model="serviceType" placeholder="请选择"
              style="background-color: transparent" size="medium">
              <el-option v-for="item in sericeList2" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="select-type">
            <span>预警状态</span>
            <el-select @change="selectChanged2" v-model="serviceType2" placeholder="请选择"
              style="background-color: transparent" size="medium">
              <el-option v-for="item in sericeList3" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="opration-btn">
          <span class="opration-btn__reserve" @click="reserveType()">重置</span>
          <span class="opration-btn__search" @click="searchList()">开始检索</span>
        </div>
      </div>
      <div class="justify-between list">
        <!-- 预警列表 -->
        <div class="container__content__col col-left">

          <div class="justify-start">
            <img src="@/assets/biaoti@2x.png" style="width: 24px; height: 24px" />
            <span style="color: #fff; padding-left: 10px">预警列表</span>
            <div class="opration-btn2">
              <span class="opration-btn2__reserve" @click="oneClickProcessing()">一键处理</span>
            </div>
          </div>
          <el-scrollbar style="height: 100%">
            <div class="container__content__list justify-between">
              <div class="container__content__list__item" v-for="(item, index) in warnArr" :key="index"
                @click="timeshow()">

                <warning-info-two :warnObj="item" :list="warnArr.map(_item => _item.path)" @dispose="dispose"
                  v-if="item.warningTypeName == '最多跑一次'"></warning-info-two>
                <warning-info :warnObj="item" :list="warnArr.map(_item => _item.path)" @dispose="dispose" v-else>
                </warning-info>

              </div>
            </div>
          </el-scrollbar>
          <div class="container__content__pagination justify-end">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageNo" :page-sizes="pageSizeArr" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
          </div>
        </div>
        <!-- 预警事件数量趋势图 -->
        <div class="container__content__col col-right" style="margin-left: 10px">
          <!-- <div class="col-right__top">
            <div class="justify-start">
              <img src="@/assets/biaoti@2x.png" style="width: 24px; height: 24px" />
              <span style="color: #fff; padding-left: 10px">预警事件数量趋势图</span>
            </div>

            <div class="echart-box">
              <bar-echart :echartObj="echartObj"></bar-echart>
            </div>
          </div> -->

          <div class="col-right__bottom">
            <div class="justify-start">
              <img src="@/assets/biaoti@2x.png" style="width: 24px; height: 24px" />
              <span style="color: #fff; padding-left: 10px">预警事件类型占比图</span>
            </div>
            <div class="echart-box">
              <pie-echart :optionData="optionData"></pie-echart>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import WarningInfoTwo from "@/components/WarningInfotwo.vue";
import WarningInfo from "@/components/WarningInfo.vue";

import DateTab from "@/components/DateTab.vue";
import PieEchart from "@/components/PieEchart.vue";
// import BarEchart from "@/components/BarEchart.vue";
import { GetDateStr } from "@/utils/getTime.js";

import {
  getwarningListed,
  getWarningPie,
  getWarningLine,
  getWarningSearchType,
  oneClickProcessing
} from "@/api/warning";
export default {
  name: "warningView",
  components: {
    Header,
    WarningInfoTwo,
    WarningInfo,
    DateTab,
    PieEchart,
    // BarEchart
  },
  watch: {
    call(val, oldVal) {
      console.log(val, 'watch', oldVal);
      if (val !== oldVal) {
        this.searchList()
      }

    }
  },
  computed: {
    call() {
      return this.$store.state.user.call;
    }
  },

  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      pageSizeArr: [10, 20, 30, 40, 50, 60],
      totalCount: 0,

      warnArr: [],
      dateType: 3,
      startTime: null,
      endTime: null,
      serviceType: '',
      serviceList: [

      ],
      sericeList2: [
        {
          id: '',
          name: '全部'
        },
        {
          id: '1',
          name: '关怀预警'
        },
        {
          id: '2',
          name: '最多跑一次'
        },
        {
          id: '3',
          name: '时长预警'
        },
        {
          id: '4',
          name: '大流量预警'
        }
      ],
      sericeList3: [
        {
          id: '',
          name: '全部'
        },
        {
          id: '0',
          name: '未处理'
        },
        {
          id: '2',
          name: '处理中'
        },
        {
          id: '3',
          name: '已处理'
        }
      ],
      serviceType2: '',

      echartObj: {},
      optionData: {}, //饼图数据
      listId: []
    };
  },
  mounted() {
    this.searchList();
    this.getWarningSearchType();
  },
  methods: {
    timeshow() {
      console.log(66666);

    },
    selectChanged() {
      this.searchList();
    },
    selectChanged2() {
      this.searchList();
    },
    async getWarningSearchType() {
      let res = await getWarningSearchType();
      if (res.code == 200) {
        this.serviceList = res.data.lists;
      }
    },
    //预警中心列表
    async getList() {
      let res = await getwarningListed({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        dayType: this.dateType,
        startTime: new Date(`${this.startTime} 00:00:00`).getTime() / 1000,
        endTime: new Date(`${this.endTime} 23:59:59`).getTime() / 1000,
        warningType: this.serviceType,
        warningStatus: this.serviceType2

        // zoneId: null,
        // warningStatus: null,
      });

      if (res.code == 200) {
        this.warnArr = res.data.lists;
        this.totalCount = res.data.count;
        console.log('预警中心列表', res.data);
        console.log('this.pageNo',this.pageNo);
        console.log('this.pageSize',this.pageSize);
        console.log('this.dateType',this.dateType);
        console.log('this.startTime',this.startTime);
        console.log('this.endTime',this.endTime);
        console.log('this.serviceType',this.serviceType);
        console.log('this.serviceType2',this.serviceType2);
        
      }
    },

    reserveType() {
      this.warnArr = [];
      this.serviceType = null;
      this.serviceType2 = null;
      this.dateType = 1;
      this.startTime = GetDateStr(-1);
      this.endTime = GetDateStr(0);
      this.searchList();
      this.$refs.reset.reset()
    },

    searchList() {
      this.pageNo = 1;
      // this.warnArr = [];
      this.getList();
      this.getWarningPies();
      // this.getWarningLine();
    },

    //日期选择器返回的时间
    handleSelectDate(e) {
      this.startTime = e.date[0];
      this.endTime = e.date[1];
      this.dateType = e.dateType;
      this.searchList();
    },
    handleCurrentChange(e) {
      this.pageNo = e;
      this.warnArr = [];
      this.getList();
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.pageNo = 1;
      this.warnArr = [];

      this.getList();
    },
    //折线图
    async getWarningLine() {
      let res = await getWarningLine({
        startTime: new Date(`${this.startTime} 00:00:00`).getTime() / 1000,
        endTime: new Date(`${this.endTime} 23:59:59`).getTime() / 1000,
        dayType: this.dayType,
        warnType: this.serviceType
      });

      if (res.code == 200) {
        console.log(res.data)
        this.echartObj = {
          data: res.data.legend,
          xAxis: res.data.xdata,
          series: res.data.series, //[],
          // color: ["#E5403D", "#E5BA4A", "#E6873A", "#3AD76E"],
          unit: "次",
          bottom: 10
        };
      }
    },
    //饼状图
    async getWarningPies() {
      let res = await getWarningPie({
        startTime: new Date(`${this.startTime} 00:00:00`).getTime() / 1000,
        endTime: new Date(`${this.endTime} 23:59:59`).getTime() / 1000,
        dayType: this.dayType,
        warnType: this.serviceType
      });

      if (res.code == 200) {
        this.optionData = {
          data: res.data.series,
          title: '预警总数量',
          top: 480,
          gap: 30,
          orient: 'horizontal',
          width: 600
        };
      }
    },
    async oneClickProcessing() {
      let listId = []
      this.warnArr.forEach(item => {
        listId.push(item.id);
      })

      let data = {
        listId: listId,
        warningStatus: "3"
      }
      let res = await oneClickProcessing(data);
      if (res.code == 200) {
        this.getList();
        this.$message({
          message: '处理成功',
          type: 'success'
        });
      }
      this.searchList();
    },
    // 每一项处理后重新请求列表
    dispose() {
      this.getList();
    }
  }
};
</script>


<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  &__content {
    width: 100%;
    height: 100%;
    // background: #303136;
    border-radius: 8px;
    margin: 16px auto;
    box-sizing: border-box;

    &__opration {
      padding: 0 24px;

      width: 100%;
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #3b3e42;
      background: #303136;
      border-radius: 8px;

      .select-type {
        span {
          padding: 0 24px;
          color: #949ba4;
          font-size: 14px;
        }
      }

      .opration-btn {
        span {
          display: inline-block;
          width: 88px;
          height: 36px;
          line-height: 36px;
          border-radius: 4px;
          cursor: pointer;
        }

        &__reserve {
          border: 1px solid #5cfbff;
          color: #5cfbff;
          margin-right: 24px;
        }

        &__search {
          background-color: #5cfbff;
          color: #17181a;
        }
      }
    }

    &__col {
      margin-top: 16px;
      box-sizing: border-box;
    }

    .col-left {
      width: 60%;
      height: 100%;
      background: #303136;
      border-radius: 8px;
      padding: 24px;

      .justify-start {
        position: relative;
        height: 36px;
      }
    }

    .col-right {
      width: 38.5%;
      margin-top: 0;

      &__top,
      &__bottom {
        background: #303136;
        width: 100%;
        border-radius: 8px;
        padding: 24px;

        .echart-box {
          width: 100%;
          height: 500px;
        }
      }

      &__bottom {
        margin-top: 16px;
        margin-bottom: 20px;
      }
    }

    &__list {
      margin-top: 24px;
      width: 100%;
      flex-wrap: wrap;

      &__item {
        width: 352px;
        height: 182px;
        background: #363940;
        border-radius: 4px;
        margin-bottom: 16px;
        // margin-right: 10px;
      }
    }

    &__pagination {
      width: 100%;
      // padding: 0 24px;
      margin-top: -10px;
      box-sizing: border-box;
    }
  }

  ::v-deep(.el-scrollbar__wrap) {
    overflow: auto;
  }

  .opration-btn2 {
    width: 88px;
    height: 36px;
    position: absolute;
    right: 0;

    span {
      display: inline-block;
      width: 88px;
      height: 36px;
      line-height: 36px;
      border-radius: 4px;
      cursor: pointer;
    }

    &__reserve {
      border: 1px solid #5cfbff;
      color: #5cfbff;
      margin-right: 24px;
    }
  }

  .container__content__list__item {
    display: flex;
    justify-content: space-evenly;
    //  border: 1px solid red;
    margin-right: 16px;
  }
}
</style>
